import './classify.scss'
import React,{useEffect,useState,useRef} from 'react'
import {getLeftList} from '../services/index'
import {LeftItem} from '../untils/interface'
import {useHistory} from 'react-router-dom'
const Classify:React.FC=()=>{
    //左边列表
    let [list,setList]=useState<LeftItem[]>([])    
    let [carIndex,setcarIndex]=useState(0)
    let addRef=useRef(null)
    let history=useHistory()
    //左边列表
    useEffect(()=>{
        getLeftList().then(res=>{
            // debugger
            setList(res.data.dataList)
            // setrList(res.data.dataList.rankList)
        })
    })



    //点击左边出现右边
    function changClick(index:number){
        setcarIndex(index)
        let h3s=document.querySelectorAll('h3');
        (addRef as React.MutableRefObject<any>).current.scrollTop=h3s[index].offsetTop-30
    }
    //滚动滑到响应位置
    function scrolls(event: React.UIEvent<HTMLDivElement, UIEvent>){
        //获取右边盒子的滚动高度
        let scls=(document.querySelector('.right') as Element).scrollTop
        //获取h3
        let arr=document.querySelectorAll('h3')
        //循环h3
        arr.forEach((item,index)=>{
            if(scls>=item.offsetTop-10){
                setcarIndex(index)
            }
        })
    }
    //点击搜索跳转
    function searcha(){
        history.push('/search')
    }
    
    return <div className='classiify'>
        <div className="left" ref={addRef}>
            {
                list.map((item,index)=>{
                    return <li key={index} className={carIndex===index?'active':''} onClick={()=>{changClick(index)}}>
                        {item.name}
                    </li>
                })
            }
        </div>
        <div className="right" ref={addRef} onScroll={scrolls}>
           <div className='input'>
           <input type="text" placeholder='搜索' onClick={searcha}/>
           </div>
         
            
     
            {
               list.map((item,index)=>{
                   return <div key={index}>
                       <h3>{item.name}</h3>
                       <div>
                       {
                           item.rankList.map((item:any,index)=>{
                               return <dl key={index}>
                                       <dt>
                                           <img src={item.image} alt=""/>
                                       </dt>
                                       <dd>
                                           <p>{item.name}</p>
                                       </dd>
                                   </dl>
                           })
                       }
                       </div>
                       
                   </div>
               })
            }
        </div>
    </div>
    
}
export default Classify